WebApp Plugin - iOS

A dedicated plugin called "WebApp Plugin" has been created to display web content. On the feature page, there is a distinct section for the hackathon event. This section will showcase the details of the hackathon attendees. Each card in this list represents the information of an individual attendee. The attendee details are configured within the CMS, and the display information along with the registered web URL are retrieved from the CMS to present in the user interface.

When user click on any attendee's card, it will navigate to the WebApp Plugin, which loads the URL.

The below code snippet facilitates the navigation to the WebApp Plugin when the corresponding feature is selected. It constructs a query parameter with the registered URL and uses a deep link manager to open the plugin while maintaining the current navigation stack, providing a seamless user experience.

if feature.identifier == PluginID.webAppPlugin {
    let query = URLQueryItem(name: "registeredURL", value: feature.registeredURL)
    deepLinkManager.openPlugin(feature.identifier, popLastPushedView: false, queryParameters: [query])
}

When user tries to load the registered web URL, the access token along with firstname, lastname, and kvnumber are passed along with the request. After validating the token details from the web app side, the URL will get loaded.

Once the URL is sent to the web app, it will verify the URL with the access token, and after validation, the web page will be loaded. The below image is an example for the webpage. The web view may display the userdetials. There are several buttons available. When one of these buttons under "Show Alert Message" is clicked, a message from the web application will be displayed. If the selected button is labeled as "User redirection via JavaScript handler" then it will navigate to the in-app path provided by the web application. Additionally, clicking on the href links within the buttons will trigger in-app navigation to the corresponding deep link path.

In this web application, in-app redirections are possible. This is achieved by deeplinking. Two types of redirections have been implemented:

1. User redirection via Javascript handler.

   Here an extension for a WebViewRepresentable class, which includes a nested Coordinator class designed to facilitate interactions between a SwiftUI view and a WKWebView from UIKit. The Coordinator class serves as a mediator, implementing several WebKit framework protocols to manage web content and user interactions within the web view. The code snippet is shown below

   The Coordinator class conforms to the WKScriptMessageHandler protocol, which plays a crucial role in enabling native code to receive and respond to messages sent from JavaScript running within the web view. This communication is essential for integrating web-based features into a native app environment.

   Within the Coordinator class, the userContentController(_:didReceive:) method is implemented to handle incoming script messages. When a message is received, the method checks if the message's body contains a dictionary with the expected structure. It then processes the message based on the value associated with the action key.

   The method specifically handles two types of actions:

   • "displayText": For this action, the method retrieves a string from the data key and may trigger a callback to display an alert or informational text within the native app interface.
   • "deeplink": For this action, the method extracts a navigation path from the data key and may trigger a callback to perform navigation within the app, such as opening a specific view or screen based on the path received from the web content.

   The WKScriptMessageHandler protocol and the userContentController(_:didReceive:) method are integral to the Coordinator class, allowing the WebViewRepresentable to handle complex interactions with web content seamlessly within a SwiftUI application. This setup enables the app to react to events from the web view, providing a richer user experience by combining web and native functionalities.

           public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
            guard let body = message.body as? [String: Any] else { return }
            if message.name == "AppInterface" {
                if let action = body["action"] as? String {
                    switch action {
                    case "displayText":
                        // pass alert text
                        if let alertText = body["data"] as? String {
                            parent.coordinator.onAlertAction?(alertText)
                        }
                    case "deeplink":
                        // pass navigation path
                        if let navigationPath = body["data"] as? String {
                            parent.coordinator.onDeepLinkNavigation?(navigationPath)
                        }
                    default:
                        break
                    }
                }
            }
        }

   Once the display text is received , it can be easily configured in the user interface. Similarly, once a deep link navigation path is obtained, user can navigate to the corresponding location using that deep link.

   For example, if the navigation path provided is for magazine details, such as navidapro://healthmagazin/details?article_id=606, user can use deep linking to access the magazine details page with the ID of 606.

2. User redirection via HREF.

   In this method, when using WKWebView from the WebKit framework, navigation actions can be controlled by implementing the WKNavigationDelegate protocol, specifically the webView(_:decidePolicyFor:preferences:) method. This asynchronous delegate function determines whether a navigation action, such as clicking a link, should be allowed or canceled. The method sets allowsContentJavaScript to true, allowing JavaScript execution in the web content. It then checks if the URL from the navigation action's request is valid. If the URL is nil, it cancels the navigation. If the URL is valid, it may call an closure (onURLChange) to handle the URL change, and finally returns a tuple allowing the deeplink navigation to proceed. This method enables to intercept and manage navigation actions within a WKWebView, providing control over web content behavior in a Swift application.

   The sample flow of application is shown below.